<template>
<div>
    <van-button
      style="position:fixed;top: 30px;right:0;z-index:999"
      type="primary"
    >loading:{{loading}}===finished:{{ finished }}===按钮</van-button>
    <van-list :finished="finished" @load="onLoad" finished-text="我是有底线的" v-model="loading">
      <van-cell :key="index" :title="item" v-for="(item,index) in list" />
    </van-list>
  </div>
</template>
<script>
import axios from 'axios';
export default{
    data () {
        return {
           seart:1,
           end: 20,
           list: [],
           loading:false , //加载状态 只要onLoad触发就会变成true
           finished: false , //不能上拉 ,已经到底
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
        onLoad() {
           //初次进入也会触发 ,上拉就触发
            console.log('onLoad')
            

            //设置终止上拉条条件
            if(this.start > 60){
              this.finished = true //结束上拉 设置值为trur就表示不能上拉
              return
            }

            // for(var i = 0 ; i<20; i++){
            //   this.list.push(this.list.length + 1)
            // }

            // this.loading = false  //结束当前加载

      setTimeout(()=>{
       this.geiData()
       this.start += 20
       this.end += 18
       this.loading = false //结束当前加载
      },1000)

      },

      async getData () {
        const res = await axios({
        url:'http://124.223.73.204:8080/houses',
        params:{
          start: this.start, //当前页
          end: this.end, //每页显示多少条
          cityId:'AREA|dbf46d32-7e76-1196'
        }
        })
        console.log(res,88)
        this.list = [...this.list,...res.dataresponse.body.list]
        
      }
    }
}
</script>
<style lang='less'  scoped>
    
</style>
